<template>
  <div>
    <!-- <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-end align-items-center">
        <el-button type="primary" @click="onAdd()">添加</el-button>
      </div>
    </div> -->
    <div class="app_card pt-4  pb-5">
      <el-table stripe size="large" :data="dataOfTable" height="calc(100vh - 200px)">
        <el-table-column label="学期" prop="title" align="center">
          <template #default="scope">{{ scope.row.title}}</template>
        </el-table-column>
        <el-table-column label="开始时间" prop="startDate" align="center">
          <template #default="scope">{{ scope.row.startDate}}</template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endDate" align="center">
          <template #default="scope">{{ scope.row.endDate}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="onEditRow(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-2">
         <el-pagination background v-model:currentPage="queryForm.page" v-model:page-size="queryParam.limit" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.totalCount" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
      </div>
    </div>

    <div>
    </div>
    <edit-dialog ref="editDialogRef" @success="loadData()"></edit-dialog>
  </div>
</template>

<script setup>
/**
 * 教室管理
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';

//组件
import EditDialog from './EditDialog.vue';

// ======================================================
//                      变量声明
// ======================================================





const authStore = useAuthStore();

// 组件引用
const editDialogRef = ref(null);

// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryForm = ref({
  page: 1,
})
// 表格查询参数
const queryParam = ref({
  sort: "Id",
  order: "asc",
  limit: 10

})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  total: 0,
})

// ======================================================
//                      处理事件
// ======================================================





// 点击新增按钮
const onAdd = (row = null) => {
  editDialogRef.value.show(0, "添加学期");
}



// 点击行内编辑按钮
const onEditRow = (row) => {
  editDialogRef.value.show(row.id, "编辑 " + row.title, row);
}

// 点击行内删除按钮
const onDeleteRow = (row) => {
  ElMessageBox.confirm("确定要删除该记录吗？", "警告").then(() => {
    EsAjax.delete(ApiUrls.articleCategoryDelete, { params: { id: row.id } })
      .then(res => {
        if (res.data.code != 200) {
          ElMessage.warning(res.data.data+res.data.msg);
          return;
        }
        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => { });
  console.log(row)
}


// 处理分页尺寸
const handleChangeSize = (val) => {
  queryParam.value.page = 1;
  queryParam.value.limit = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================


const loadData = () => {
  let _queryParam = queryParam.value
  _queryParam.offset = (queryForm.value.page - 1) * _queryParam.limit || 0;

  EsAjax.post(ApiUrls.semesterConfigInfo, { ..._queryParam }).then(res => {
    console.log(res.data)
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data+res.data.msg);
      return;
    }
    console.log(res.data.data)
    // let { list, totalCount } = res.data.data
    dataOfTable.value = [res.data.data];
    // paginationOption.value.totalCount = totalCount;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}



onMounted(() => {
  loadData();
})

</script>
<style lang="less" scoped>
</style>

